<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>地图显示</title>
  <!-- 3.设置地图的样式 -->
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <!-- 2.创建地图容器 -->
  <!-- 需要设置元素的宽高样式 -->
  <div id="container"></div>
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "62c0d051bb80ad16ee5f856e7f54b44e",
    };
  </script>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=a329219cdacef71b0addbc88034c9b39"></script>
  <script type="text/javascript">
    //地图初始化应该在地图容器 <div> 已经添加到 DOM 树之后
    const map = new AMap.Map("container", {
      center: [117.000923,36.675807],
      zoom: 12,
    });

    // 点实例
    const marker = new AMap.Marker({
      position: [117.000923,36.675807],
      icon: "https://webapi.amap.com/theme/v1.3/markers/b/mark_bs.png",
      title: "济南动物园",
    })

    // 点标记添加到已有的地图实例
    map.add(marker)



  </script>


</body>

</html>